<form action="#" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label>公司名:</label>
            <div class="layui-inline">
                <input type="text" name="username" id="username" autocomplete="off" placeholder="请输入名称"
                       class="layui-input">
            </div>
            <label>状态:</label>
            <div class="layui-inline">
                <select name="state" id="state">
                    <option value="">请选择</option>
                    <option value="0">无效</option>
                    <option value="1">有效</option>
                </select>
            </div>
<!--            <button class="layui-btn" lay-submit lay-filter="customer-table" >搜索</button>-->
            <input type="button" class="layui-btn" id="btn" value="搜索"/>
        </div>
    </div>
</form>

<script type="text/html" id="customer-head-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="goEdit"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除
        </button>
    </div>
</script>
<script type="text/html" id="customer-customer-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-customer">编辑</a>
</script>

<table class="layui-table" lay-filter="customer-table" id="customer-table">
</table>
<script type="text/javascript">
    $(function () {

        render();

        search();
    })

    function search(){
        $("#btn").click(function(){
            var username = $("#username").val();
            var state = $("#state").val();

            layui.use(['table'],function () {
                var table = layui.table;

                //手动的对表格进行渲染
                table.render({
                    id: "customer-table"
                    /*指定原始 table 容器的选择器或 DOM，方法渲染方式必填*/
                    , elem: '#customer-table'
                    /*开启工具栏*/
                    , toolbar: '#customer-head-bar'
                    /*请求后端，获取表格填充的数据*/
                    , url: 'sys/customer/search?username='+username+'&state='+state //数据接口
                    /*开启分页*/
                    , page: {limits: [5, 10, 15, 20, 25]}
                    /*填充表格数据*/
                    , cols: [[ //表头
                        {checkbox: true}
                        , {field: 'id', title: 'ID', sort: true}
                        , {field: 'username', title: '客户名'}
                        , {field: 'nickname', title: '公司名'}
                        , {field: 'address', title: '地址'}
                        , {field: 'money', title: '余额'}
                        , {
                            field: 'state', title: '状态', templet: function (data) {
                                return (data.state == 1) ? '<span class="layui-badge layui-bg-green">有效</span>' : '<span class="layui-badge layui-bg-red">无效</span>'
                            }
                        },
                        {field: 'right', title: "操作", toolbar: '#customer-customer-bar', width: 150}
                    ]]
                });
            })
        })
    }

    function render() {
        //渲染表格
        layui.use(['table', 'layer', 'form'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;

            form.render();
            //手动的对表格进行渲染
            table.render({
                id: "customer-table"
                /*指定原始 table 容器的选择器或 DOM，方法渲染方式必填*/
                , elem: '#customer-table'
                /*开启工具栏*/
                , toolbar: '#customer-head-bar'
                /*请求后端，获取表格填充的数据*/
                , url: 'sys/customer/table' //数据接口
                /*开启分页*/
                , page: {limits: [5, 10, 15, 20, 25]}
                /*填充表格数据*/
                , cols: [[ //表头
                    {checkbox: true}
                    , {field: 'id', title: 'ID', sort: true}
                    , {field: 'username', title: '客户名'}
                    , {field: 'nickname', title: '公司名'}
                    , {field: 'address', title: '地址'}
                    , {field: 'money', title: '余额'}
                    , {
                        field: 'state', title: '状态', templet: function (data) {
                            return (data.state == 1) ? '<span class="layui-badge layui-bg-green">有效</span>' : '<span class="layui-badge layui-bg-red">无效</span>'
                        }
                    },
                    {field: 'right', title: "操作", toolbar: '#customer-customer-bar', width: 150}
                ]]
            });

            //监听工具条
            table.on('toolbar(customer-table)', function (obj) {
                switch (obj.event) {
                    //判断事件的类别
                    case 'goEdit':
                        //编辑操作
                        openEditWindow(null);
                        break;
                    case 'delete':
                        var data = table.checkStatus("customer-table").data;
                        if (data.length>0){ //如果选中的行数大于或等于一行
                            layer.confirm("确定要删除吗？",function (index) {
                                //点击确定的回调函数
                                var params = "";
                                $.each(data,function (i,e) {
                                    params+="&ids="+e.id;   //所有行的id值
                                });
                                //发送删除请求
                                $.ajax({
                                    url:"sys/customer/delete",
                                    data:params,
                                    type:'GET',
                                    success:function (data) {
                                        if(data.state){
                                            //删除成功
                                            table.reload("customer-table",{});
                                        }else {
                                            //删除失败
                                            layer.msg("删除失败");
                                        }
                                        //关闭当前弹出层
                                        layer.close(index);
                                    }
                                });
                            })
                        }
                        break;
                }

            })

            //监听编辑按钮
            table.on("tool(customer-table)", function (obj) {
                var data = obj.data;    //数据
                switch (obj.event) {
                    case "edit-customer":
                        openEditWindow(data);
                        break;
                }
            })

            //添加删除操作
            function openEditWindow(data) {
                //弹出添加框
                layer.open({
                    type:1 //第一种类型的弹出框
                    ,content:data==null?$("#customer-add-layer").html():$("#customer-edit-layer").html()
                    ,title:"编辑"
                    ,area:['500px','400px']
                    ,btn:['提交','取消']    //按钮
                    ,yes:function (index,layero) {  /*确定按钮的回调方法*/
                        layer.load();   //切换弹出层样式
                        $.ajax({
                            url: "sys/customer/"+(data==null?"add":"update"),
                            type: 'POST',
                            data:data==null?$("#customer-add-form").serialize():$("#customer-edit-form").serialize(),
                            success:function (result) {
                                if(result.state){
                                    table.reload("customer-table",{}); //刷新表格
                                    layer.close(index); //关闭当前弹出框
                                }else {
                                    layer.msg(result.message);
                                }
                                layer.closeAll();
                            }
                        });
                    }
                    /*层弹出后的成功回调方法*/
                    ,success:function (index,layero) {
                        //加载form表单
                        form.render();
                        if (data!=null){    //编辑操作,回显数据
                            form.val("customer-edit-form",data);
                            form.val("customer-edit-form",{
                                "state":data.state+""
                            });
                        }
                    }
                });

            }

        });


    }
</script>

<script type="text/html" id="customer-edit-layer">
    <form id="customer-edit-form" style="width: 80%" class="layui-form" lay-filter="customer-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="nickname" required lay-verify="required" placeholder="请输入公司名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" required lay-verify="required" placeholder="请输入地址"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账户金额(元)</label>
            <div class="layui-input-block">
                <input type="number" name="money" required lay-verify="required" placeholder="请输入账号金额"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" title="有效" value="1" checked/>
                <input type="radio" name="state" title="无效" value="0"/>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="customer-add-layer">
    <form id="customer-add-form" style="width: 80%" class="layui-form" lay-filter="customer-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="nickname" required lay-verify="required" placeholder="请输入公司名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" required lay-verify="required" placeholder="请输入地址"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">账户金额(元)</label>
            <div class="layui-input-block">
                <input type="number" name="money" required lay-verify="required" placeholder="请输入账号金额"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" title="有效" value="1" checked/>
                <input type="radio" name="state" title="无效" value="0"/>
            </div>
        </div>
    </form>
</script>